<template>
  <div class="blog-wrapper">
    <section class="content">
      <ul>
        <li v-for="i in 100" :key="i">
          <article>
            <h3>如何在编写App时填充数据?</h3>
            <p>
              填充数据为什么困难？在我看来大概有3个理由：第一点，它往往轻易的让程序员用轻视的态度去对待它；第二点，数据的表现方式往往并非意料中的那么少，但我们不能面面俱到。第三点，它与编写程序无关。
            </p>
            <aside>
              <span>发表日期:18点53分</span
              ><span>浏览量:21 点赞量:22 评论量27</span>
            </aside>
          </article>
        </li>
      </ul>
    </section>
    <aside>
      <section class="user">
        <div class="user-avatar"></div>
        <div class="user-actions">
          <ul>
            <li>博客:271</li>
            <li>随笔:1121</li>
            <li>评论数:2231</li>
            <li>点赞数:1217</li>
          </ul>
        </div>
      </section>
      <footer>
        我的个人博客·www.access.com<br />友情链接：www.access2.com
      </footer>
    </aside>
  </div>
</template>

<script>
// @ is an alias to /src

export default {
  name: "Home",
  components: {},
};
</script>
<style lang="scss" scoped>
.blog-wrapper {
  margin-top: 10px;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  .content {
    flex: 1;
    margin-right: 10px;
    ul {
      list-style: none;
      padding: 0;
      margin: 0;
      li {
        box-shadow: 0 1px 5px rgb(110, 108, 108);
        padding: 10px 20px;
        article {
          p {
            text-indent: 2em;
            letter-spacing: 1px;
          }
        }
      }
      li + li {
        margin-top: 7px;
      }
    }
  }
  aside {
    width: 264px;
    margin-right: 10px;
    .user {
      display: grid;
      justify-content: center;
      padding: 20%;
      box-shadow: 0 1px 5px rgb(110, 108, 108);
      .user-avatar {
        border: 1px solid #000;
        border-radius: 50%;
        width: 80px;
        height: 80px;
        background: url("../assets/logo.png") no-repeat;
        background-position: center center;
        background-size: 50% 50%;
      }
      .user-actions {
        ul {
          list-style: none;
          padding: 0;
          margin: 0;
        }
      }
    }
    footer {
      padding-top: 6%;
      color: gray;
      font-size: 0.7rem;
    }
  }
}
</style>
